<template>
  <div class="page-container">
    <el-form :model="ruleForm" label-position="left" label-width="0px"
             class="demo-ruleForm login-container" :rules="rules" ref="ruleForm">
      <h3 class="title">颐瑞网站管理平台</h3>
      <el-form-item prop="username">
        <el-input type="text" v-model="ruleForm.username" auto-complete="off" placeholder="用户名"></el-input>
      </el-form-item>
      <el-form-item prop="password">
        <el-input type="password" v-model="ruleForm.password" auto-complete="off" placeholder="密码"
                  @keyup.enter.native="submitForm('ruleForm')"></el-input>
      </el-form-item>
      <el-form-item id="code" prop="code">
        <el-input type="text" v-model="ruleForm.code" auto-complete="off" placeholder="验证码"
                  style="width: 50%;float: left" @keyup.enter.native="submitForm('ruleForm')" maxlength="4"></el-input>
        <img id="img" @click="refresh">
      </el-form-item>
      <el-form-item style="width:100%;">
        <el-button-group style="width: 100%">
          <el-button type="primary" style="width: 100%" @click="submitForm('ruleForm')" :loading="loading">登录
          </el-button>
        </el-button-group>
      </el-form-item>
    </el-form>
  </div>
</template>

<script>
  import axios from 'axios'
  export default {
    name: 'Login',
    data () {
      return {
        ruleForm: {
          username: '',
          password: '',
          code: ''
        },
        rules: {
          username: [
            {required: true, message: '请输入用户名', trigger: 'blur'}
          ],
          password: [
            {required: true, message: '请输入密码', trigger: 'blur'}
          ],
          code: [
            {required: true, message: '请输入验证码', trigger: 'blur'}
          ]
        },
        loading: false,
        codes: false
      }
    },
    methods: {
      submitForm (formName) {
        this.$refs[formName].validate((valid) => {
          if (valid) {
            this.check()
          }
        })
      },
      refresh () {
        window.document.getElementById('img').src = `${this.BASE_URL}/user/getCode?number=` + Math.random()
      },
      check () {
        axios({
          method: 'get',
          url: `${this.BASE_URL}/user/checkCode`,
          responseType: 'json',
          params: {
            code: this.ruleForm.code
          }
        }).then((response) => {
          if (response.data.data === '0') {
            axios({
              method: 'get',
              url: `${this.BASE_URL}/manager/vali`,
              responseType: 'json',
              params: {
                username: this.ruleForm.username,
                password: this.ruleForm.password
              }
            }).then((response) => {
              if (response.data.statuCode === '0') {
                sessionStorage.setItem('username', response.data.data)
                this.$store.commit('updateLoginStatus', {isLogin: true})
                this.$store.commit('updateUsername', {username: response.data.data})
                this.$router.push({path: '/home'})
                this.loading = false
              } else {
                this.loading = false
                this.$alert('密码或用户名错误', '提示', {
                  confirmButtonText: '确定'
                })
                this.refresh()
                this.ruleForm.password = ''
              }
            }).catch(() => {
              this.loading = false
            })
          }
          if (response.data.data === '1') {
            this.$message.error('验证码错误')
            this.refresh()
          }
        }).catch(() => {
          this.loading = false
        })
      },
      vali () {
        axios({
          method: 'get',
          url: `${this.BASE_URL}/user/vali`,
          responseType: 'json',
          params: {
            username: this.ruleForm.username,
            password: this.ruleForm.password
          }
        }).then((response) => {
          if (response.data.statuCode === '0') {
            sessionStorage.setItem('username', response.data.data)
            this.$store.commit('updateLoginStatus', {isLogin: true})
            this.$store.commit('updateUsername', {username: response.data.data})
            this.$router.push({path: '/home'})
            this.loading = false
          } else {
            this.loading = false
            this.$alert('密码或用户名错误', '提示', {
              confirmButtonText: '确定'
            })
            this.ruleForm.password = ''
          }
        }).catch(() => {
          this.loading = false
        })
      }
    },
    mounted () {
      window.document.getElementById('img').src = `${this.BASE_URL}/user/getCode?number=` + Math.random()
    }
  }
</script>

<style scoped>
  .login-container {
    /*box-shadow: 0 0px 8px 0 rgba(0, 0, 0, 0.06), 0 1px 0px 0 rgba(0, 0, 0, 0.02);*/
    -webkit-border-radius: 5px;
    border-radius: 5px;
    -moz-border-radius: 5px;
    background-clip: padding-box;
    margin: 180px auto;
    padding: 35px 35px 15px 35px;
    /*background: #00d1b2;*/
    border: 1px solid #eaeaea;
    box-shadow: 0 0 80px #CCCCCC;
    width: 27%;
    position: relative;
    background-color: #fff;
  }

  .title {
    margin: 0px auto 40px auto;
    text-align: center;
    color: #1b6d85;
    font-size: 19pt;
  }

  .remember {
    margin: 0px 0px 35px 0px;
  }

  .el-form-item__content {
    width: 100%;
  }

  .el-input, .el-input__inner {
    width: 100%;
  }

  .di {
    direction: inherit;
  }
</style>
